<!-- 业务测算表  -->
<template>
<div class="depositpay">


  <div class="head">
      <export-excel module-name="businessform_depositpay" file-name="保证金付款发票.xlsx"></export-excel>
    <h2>保证金付款发票</h2>
  </div>


   <div class="head-1">
      <img class="tcf-png" src="../../../../assets/img/tcf.png" alt="">
      <p style="font-weight:bolder;"> TIAN JIN FINANCIAL TRADE LINK IMPORT AND EXPORT CO.,LTD</p>
      <p>NO.88-2-2205,HUANHE SOUTH ROAD,CHINA(TIANJIN)PILOT FREE TRADE ZONE</p>
      <p>TIANJIN AIRPORT ECONOMIC AREA),TIANJIN,CHINA"</p>
      <p></p>
    </div>


    <div class="contract">
      <h1>WARRANTY PAYMENT INVOICE</h1>
      <div class="clearfix">
        <div class="contract-order">
          <el-form label-width="80px">
            <el-form-item label="编号NO:">
              <input class="address-input relate-color" placeholder="请输入相关内容" :readonly="!editable"  v-model="bdp_no" @input="handleSimpleInput('bdp_no', $event)" />
            </el-form-item>

            <el-form-item label="日期Date:">
              <el-date-picker class="relate-color" v-model="bdp_date" value-format="yyyy-MM-dd" :readonly="!editable" @change="selectDate" ></el-date-picker>
            </el-form-item>

          </el-form>
        </div>
      </div>


        <el-form label-width="120px">
          <el-form-item label="买方BUYER:">
            <input class="address-input relate-color"  placeholder="请输入相关内容"  :readonly="!editable" 
            v-model="bdp_buyerName" @input="handleSimpleInput('bdp_buyerName', $event)" />
          </el-form-item>

          <el-form-item label="地址ADDRESS:">
            <input class="address-input relate-color"  placeholder="请输入相关内容"  :readonly="!editable" 
            v-model="bdp_buyerAddress" @input="handleSimpleInput('bdp_buyerAddress', $event)" />
          </el-form-item>
        </el-form>
    </div>

    <div class="table">
        <p class="table-title">
            Ⅰ. PRICE INFORMATION
        </p>

            <el-table :data="bdp_table1"  border style="width: 100%" >
            <el-table-column label="序号">
            <el-table-column type="index" label="NO" :index="indexMethod"></el-table-column>
            </el-table-column>
  
            <el-table-column label="项目" min-width="100">
                <el-table-column prop="bdp_table1_item" label="ITEM">
                    <template slot-scope="scope">
                        <span  class="cell-edit-input">
                            <input  @input="handleTableInput(scope, 'bdp_table1_item', $event)" placeholder="请输入相关内容"   :readonly="!editable" v-model="scope.row.bdp_table1_item" >
                        </span>
                    </template>
                </el-table-column>
            </el-table-column>

            <el-table-column label="描述" min-width="100">
                <el-table-column prop="bdp_table1_desc" label="DESCRIPTION">
                    <template slot-scope="scope">
                        <span  class="cell-edit-input">
                            <input  @input="handleTableInput(scope, 'bdp_table1_desc', $event)" placeholder="请输入相关内容"   :readonly="!editable" v-model="scope.row.bdp_table1_desc" >
                        </span>
                    </template>
                </el-table-column>
            </el-table-column>

            <el-table-column label="金额" min-width="100">
                <el-table-column prop="bdp_table1_lineAmount" label="AMOUNT(USD)">
                    <template slot-scope="scope">
                        <span  class="cell-edit-input">
                            <input  @input="handleTableInput(scope, 'bdp_table1_amount', $event)" placeholder="请输入相关内容"   :readonly="!editable" v-model="scope.row.bdp_table1_lineAmount" >
                        </span>
                    </template>
                </el-table-column>
            </el-table-column>

            <el-table-column v-if="editable" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="addNewLine(scope.$index, bdp_table1)" type="text" size="small">
                添加</el-button>
                <el-button @click="removeCurrentLine(scope.$index, bdp_table1)" type="text" size="small">移除</el-button>
                </template>
             </el-table-column>

        </el-table>
    </div>

     <div class="extra-table">
         <el-row class="extra-money">
            <el-col :span="16"><div>Total</div></el-col>
            <el-col :span="8"><input v-model="bdp_table1_amount" @input="handleSimpleInput('bdp_table1_amount', $event)"/></el-col>
         </el-row>
     </div>

    <div class="other">
        <p>
            NOTE: THIS PAYMENT WILL BE RETURN TO THE CLIENT AFTER FINISH THE ORDER ON TIME. 				
        </p>
        <el-row>
            <el-col :span="5">
                <span>Beneficiary:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                 v-model="bdp_beneficiary" @input="handleSimpleInput('bdp_beneficiary', $event)"
                />
            </el-col>
        </el-row>

         <el-row>
            <el-col :span="5">
                <span>Company Address:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                 v-model="bdp_companyAddress" @input="handleSimpleInput('bdp_companyAddress', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>Beneficiary Bank Name:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                 v-model="bdp_beneficiaryBankName" @input="handleSimpleInput('bdp_beneficiaryBankName', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>Bank Address:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" :readonly="!editable"
                 v-model="bdp_bankAddress" @input="handleSimpleInput('bdp_bankAddress', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>SWIFT BIC:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容" :readonly="!editable"
                v-model="bdp_swiftBic" @input="handleSimpleInput('bdp_swiftBic', $event)"
                />
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="5">
               <span>Bank Account:</span>
            </el-col>
            <el-col :span="10">
                <input type="text" placeholder="请输入内容"  :readonly="!editable"
                v-model="bdp_bankAccount" @input="handleSimpleInput('bdp_bankAccount', $event)"
                />
            </el-col>
        </el-row>

    </div>

</div>

</template>

<script>
import {uploadFiles} from '@/server/initiatingprocess';
import {filedownload , deleteFile} from '@/server/customermanagement/index.js';
import {toFixed} from '@/util/transform.js';
import {handleEmit} from '../common.js';
import exportExcel from '../../common/exportExcel.vue';

export default {

  created(){
      const self = this;
      
      this.keys.forEach(key => {
          this[key] = _.cloneDeep(this.datas[key]);
      });


      this.bus.$on('depositpay-date', function(arg){
          self.bdp_date = arg[0];
          self.emitToParent();
      });

      this.bus.$on('depositpay-order-number', function(arg){
          self.bdp_no = arg[0];
          self.emitToParent();
      });

      this.bus.$on('depositpay-buyer-address', function(arg){
          self.bdp_buyerAddress = arg[0];
          self.emitToParent();
      });

      this.bus.$on('depositpay-buyer-mesg', function(arg){
          self.bdp_buyerAddress = arg[0].bf_buy_address;
          self.bdp_buyerName = arg[0].bf_buy_name;
          self.bdp_no = arg[0].bf_orderNumber;
          self.emitToParent();
      });

      this.bus.$on('deposit-table-first', function(arg){
          let temp = self.bdp_table1[0];
          temp.bdp_table1_lineAmount = toFixed(arg[0]);
          self.bdp_table1.splice(0, 1, temp);
          self.computeTableTotalAmount();
          self.emitToParent();
      });



  },

  methods: {

     /**
     * 数据发生改变时，通知父组件
     */
    emitToParent(){
      let newData = {};
      this.keys.forEach(key => {
        newData[key] = _.cloneDeep(this[key]);
      });
      this.$emit("fromDP", "businessform_depositpay", newData);
    },

     /**
     *  数据更新之后 通知需要关联的组件
     * @param {String} eventName
     * @param {String} option
     * @param {Array} value
     */
    emitToNext(eventName, ...arg){
      this.bus.$emit(eventName, arg);
    },

     /**
     * 处理其他 input  输入
     * @param {Object} scope  表格的scope
     * @param {String} key   字段名称
     */
    handleSimpleInput(key, event){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },

    /**
     * 表格输入处理
     * @param {Object} scope  表格的scope
     * @param {String} key   字段名称
     * @param {Object} event  dom事件
     */
    handleTableInput(scope, key, event){
        this.computeTableTotalAmount();
        handleEmit(null, ()=> {
            this.emitToParent();
        });
    },


    selectDate(value){
      handleEmit(null, ()=> {
        this.emitToParent();
      });
    },


    indexMethod(index) {
      let lines = this.bdp_table1.length;
      return index + 1;
    },

     addNewLine(currentIndex, table){
       let keys = [
            "bdp_table1_item",
            "bdp_table1_desc",
            "bdp_table1_lineAmount"
        ];

        let lastLine = _.cloneDeep(table[currentIndex]), newLine = {};

        keys.forEach(key => {
            newLine[key] = lastLine[key];
        });

        table.splice(currentIndex + 1, 0, newLine);
        this.computeTableTotalAmount();

        handleEmit(null, () => {
            this.emitToParent();
        });
    },
    removeCurrentLine(currentIndex, table){
      if (table.length > 1){
        table.splice(currentIndex, 1);
        this.computeTableTotalAmount();
         handleEmit(null, () => {
           this.emitToParent();
         });
      }
    },

    computeTableTotalAmount(){
        let total = 0;
        this.bdp_table1.forEach(item => {
            let temp = Number(item.bdp_table1_lineAmount);
            temp = Number.isNaN(temp) ? 0 :  temp;
            total += temp;
        });
        this.bdp_table1_amount = toFixed(total);
    }
  },

  mounted(){
  },

  updated(){

  },

  watch: {
      datas(newValue, oldValue){
          this.keys.forEach(key => {
              this[key] = _.cloneDeep(newValue[key]);
          });
      }
  },

  props: {
    datas: {
      type: Object,
      required: true
    },
    bus: {
      type: Object,
      required: true
    },
    editable: {
      type: Boolean,
      required: true
    }
  },
  data() {
      return {
        id: '',
        formInstId: '',
        bdp_no: '',
        bdp_date: '',
        bdp_buyerName: '',
        bdp_buyerAddress: '',

        bdp_table1: [{
            bdp_table1_item: '',
            bdp_table1_desc: '',
            bdp_table1_lineAmount: '',
        }],

        bdp_table1_amount: '',

        bdp_beneficiary: 'BIZOE INTERNATIONAL GROUP LIMITED',
        bdp_companyAddress: 'UNIT 04,7/F BRIGHT WAY TOWER NO.33 MONG KOK RD KL',
        bdp_beneficiaryBankName: 'CHINA ZHESHANG BANK BEIJING BRANCH',
        bdp_bankAccount:'NRA1000000011420100046799',
        bdp_bankAddress: 'NO.1 FINANCIAL STEREET,XICHENG DISTRICT,BEIJING,CHINA',
        bdp_swiftBic:'ZJCBCN2N',
        keys: [
        'bdp_no',
        'bdp_date',
        'bdp_buyerName',
        'bdp_buyerAddress',
        'bdp_table1',
        'bdp_table1_amount',
        'bdp_beneficiary',
        'bdp_companyAddress',
        'bdp_beneficiaryBankName',
        'bdp_bankAccount',
        'bdp_bankAddress',
        'bdp_swiftBic',
        "id",
        "formInstId"
        ]
      }
  },
   components: {
      exportExcel
   }
}
</script>

<style lang="scss">


.depositpay {
    padding: 20px;
    border: 1px solid #999;


    .relate-color {
    // background-color: #efa54b36 !important;

    input {
      background-color: transparent !important;
    }
   }

    .select-currency {
      select {
        margin-left: 12px;
        height: 30px;
        width: 60px;
      }
    }
    .head {
      > h2 {
        text-align: center;
      }
      .head-ctrl {
        height: 60px;
        .order-number {
          padding: 16px 0px;
          float: left;
        }
        button {
          float: right;
        }
      }

      .head-number {
        .el-input {
          width: 400px;
        }
      }
    }

    .head-1 {
      text-align: center;
      padding: 20px;

        .tcf-png {
        position: absolute;
        width: 90px;
        left: 48px;
        top: 60px;
        }
    }

    .contract {
      >h1 {
        text-align: center;
      }

     .address-input {
        width: 94%;
        border: 1px solid #999;
        height: 32px;
        border-radius: 4px;
        padding-left: 10px;
    }

      .contract-order {
          float: right;
      }

      .contract-seller {
        >p {
          >span {
            font-weight: bolder;
          }
          margin-bottom:20px;
        }
      }

    }

    .table {
        margin-top: 20px;

        th {
            text-align: center;
            padding-bottom: 0;
            padding-top: 0;
        }

        td {
           border: 1px solid #e6ebf5;
        }

        .el-table__body-wrapper {
            overflow: hidden;
        }

         .cell {
            height: 100%;
        }

        .cell-edit-input {
            display: block;
            width: 100%;
            height: 100%;

            input {
              width: 100%;
              height:100%;
              border: none;
              outline: none;
               background-color: transparent;
            }
        }
              

        .table-title {
            font-weight: bolder;
        }
    }


  .extra-table {
          .extra-money {
            border: 1px solid #e6ebf5;
            text-align: center;
            color: #5a5e66;

            .el-col {
                height: 40px;
                line-height: 40px;
            }

            &:nth-child(1){
              border-top: none;
            }

            .el-col:nth-child(2){
              border-left: 1px solid #e6ebf5;
            }

            input {
              width: 90%;
              border: none;
              outline: none;
              text-indent: 1em;
              color: #5a5e66;
            }
          }
  }

    .other {
        margin-bottom: 30px;

        .other-time {
            .el-col {
                height: 40px;
            }
        }

        .el-col {
            >span {
                display: inline-block;
                height: 30px;
                line-height: 30px;
            }
        }

        .el-row {
            margin-bottom: 10px;
        }

        .el-row:not(.other-time){
           input {
             width: 100%;
             height: 30px;
             border: 1px solid #e6ebf5;
             border-radius: 2px;
             outline: none;
             background-color: transparent;
            }
        }


        p {
            height: 30px;
            line-height: 30px;
            margin-bottom: 10px;
            font-weight: bolder;
        }

    }

    
    .upload {
      >div {
        border: 1px solid #999;
        padding: 20px 0px 40px 20px;
      }

      .upload-btn {
        position: relative;
        >input {
          opacity: 0;
          width: 100px;
          height: 40px;
          position: absolute;
          top: 0;
          left: 0;
        }
      }

      .upload-files {

          > li {
              width: 300px;
              padding: 10px 0;
              transition: all 0.5s linear;

              &:hover {

                >span {
                  color: #409EFF;
                }
              }
            }

          font-size: 16px;
          span {
              padding: 0 10px;
              cursor: pointer;
              display: inline;
          }
          span.el-icon-close:hover {
              cursor: pointer;
          }
      }
      .upload-hint {
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
}
</style>


